import React from 'react'
import { Tabs, WhiteSpace } from 'antd-mobile';
import queryString from 'query-string'
import Css from '../style/common.module.css'
import Danqu from './danqu'
import SingerList from './singerList'
import Zhuanji from './zhuanji'
import Gedan from './gedan'
import Users from './users'
import Video from './video/index.js'
import Diantai from './diantai'

class Demo extends React.Component {
  constructor(){
    super()
    this.state={
      query:[]
    }
  }
  componentWillMount(){
    let {search}=this.props.location
    let query=queryString.parse(search)
    this.setState({
      query:query.keywords
    })
  }
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);

  render() {
    const tabs = [
      { title: '单曲'},
      { title: '视频' },
      { title: '歌手' },
      { title: '歌单' },
      { title: '专辑' },
      { title: '用户' },
      { title: '主播电台' },
    ];
    return (
      <div className={Css.erryuanning}>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
          <div className={Css.Danqu}>
              <Danqu name={this.state.query}/>
          </div>
          <div className={Css.video}>
            <Video name={this.state.query}/>
          </div>
          <div className={Css.singerList}>
              <SingerList name={this.state.query}/>
          </div>
          <div className={Css.gedan}>
            <Gedan name={this.state.query}/>
          </div>
          <div className={Css.zhuanji}>
            <Zhuanji name={this.state.query}/>
          </div>
          <div className={Css.users}>
            <Users name={this.state.query}/>
          </div>
          <div className={Css.gedan}>
            <Diantai name={this.state.query}/>
          </div>
          
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }
}

export default Demo